<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <style type="text/css">
        #map_container{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="map_container"></div>
<script src="__PUBLIC__/js/jquery.min.js"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=LQNBZ-YUDEX-IAY4A-TSCTF-A7L7O-7VBAP"></script>
<script>
    $(function () {
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map(map_container, {
            center: center,
            zoom: 5,
            viewMode:'2D'
        });
        //创建并初始化MultiMarker
        var markerLayer = new TMap.MultiMarker({
            map: map,  //指定地图容器
            //样式定义
            styles: {
                //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                "myStyle": new TMap.MarkerStyle({
                    "width": 25,  // 点标记样式宽度（像素）
                    "height": 25, // 点标记样式高度（像素）
                    "src": 'http://huliaokeji.weixinshop.cc/2021-04-24_60842f0b147c2.png',  //图片路径
                    //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }
                })
            },
            //点标记数据数组
            geometries: []
        });
        $.ajax({
            type:"GET",
            data:{_:Date.now()},
            dataType:"json",
            url:"{#:U('getShopLocation')}",
            success:function(data){
                if(data.code == 1){
                    console.log(data.info);
                    for(var ii=0;ii<data.info.length;ii++){
                        markerLayer.add([{
                            "id": data.info[ii].id,
                            "styleId": 'myStyle',
                            "position": new TMap.LatLng(data.info[ii].shop_lat, data.info[ii].shop_lng)
                        }
                        ])
                    }
                }else{

                }
            }
        })

    })
</script>
</body>
</html>